<template>
  <van-tabbar
    :active="active"
    :placeholder="true"
    active-color="#0d8d6b"
    @change="onChange"
  >
    <van-tabbar-item icon="home-o" name="home">首页</van-tabbar-item>
    <van-tabbar-item icon="chat-o" name="message">消息中心</van-tabbar-item>
    <van-tabbar-item icon="contact-o" name="my">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: "TabBar",
  props: {
    active: {
      type: String,
      default: "home",
    },
  },
  methods: {
    onChange(event) {
      const { detail } = event || {};
      if (detail !== this.active) {
        if (detail === "home") {
          uni.redirectTo({ url: `/pages/home/index` });
        } else if (detail === "message") {
          uni.redirectTo({ url: `/pages/message/index` });
        } else if (detail === "my") {
          uni.redirectTo({ url: `/pagesA/my/index` });
        }
      }
    },
  },
};
</script>